<template>
	<div>
		<sh-card title="javascript(支持语法提示)" class="mb-3">
			<sh-code-editor v-model="editer1Value" v-bind="editer1"></sh-code-editor>
		</sh-card>
		<sh-card title="sql(支持语法提示)" class="mb-3">
			<sh-code-editor v-model="editer2Value" v-bind="editer2"></sh-code-editor>
		</sh-card>
		<sh-card title="暗黑主题+不可编辑" class="mb-3">
			<sh-code-editor v-model="editer3Value" v-bind="editer3"></sh-code-editor>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseCodeEditor',
	data() {
		return {
			editer1Value: '',
			editer1: {
				border: true,
				height: '200px'
			},
			editer2Value: '',
			editer2: {
				border: true,
				mode: 'sql',
				placeholder: '请输入查询sql',
				height: '200px'
			},
			editer3Value: '',
			editer3: {
				disabled: true,
				theme: 'dark',
				height: '200px'
			}
		}
	}
}
</script>

<style scoped lang="scss"></style>
